<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="search">
				<el-form-item>
					<el-input v-model="search.username" placeholder="姓名"></el-input>
				</el-form-item>
				<el-select v-model="search.state" placeholder="请选择">
					<el-option label="全部" value=""></el-option>
					<el-option label="在职" value="1"></el-option>
					<el-option label="离职" value="0"></el-option>
				</el-select>

				<el-form-item>
					<el-button type="primary" v-on:click="getEmployees">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!--列表-->
		<el-table :data="employees" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="username" label="员工姓名">
			</el-table-column>
			<el-table-column prop="email" label="邮箱">
			</el-table-column>
			<el-table-column prop="phone" label="电话号码" :hidden="true">
			</el-table-column>
			<el-table-column prop="age" label="年龄">
			</el-table-column>
			<el-table-column prop="state" label="状态" :formatter="formatState">
			</el-table-column>

			<el-table-column label="操作" width="150">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
						   :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		<!-- 新增/修改的弹出框-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<!--
             :rules="addFormRules":定义校验规则的
             prop="name"：哪个属性需要校验
             -->
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="姓名" prop="username">
					<el-input v-model="addForm.username" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="addForm.email" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="电话号码" prop="phone">
					<el-input v-model="addForm.phone" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="addForm.password" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input v-model="addForm.age" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="state">
					<!--    <el-input v-model="addForm.state" auto-complete="off"></el-input>-->
					<el-radio-group v-model="addForm.state">
						<el-radio class="radio" :label="1">在职</el-radio>
						<el-radio class="radio" :label="0">离职</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
    export default {
        data() {
            return{
                //添加界面是否显示
                addFormVisible:false,
				//是否加载状态
                addLoading:false,
				//设置必填数据
                addFormRules:{
                    username: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                    ],
					email:[
					    {required: true, message: '请输入邮箱', trigger: 'blur'}
					],
					age:[
					    {required: true, message: '请输入邮箱', trigger: 'blur'}
					],
					password:[
					    {required: true, message: '请输入邮箱', trigger: 'blur'}
					]
				},
				//新增界面数据
                addForm:{
                    username:"",
					email:"",
					phone:"",
					password:"",
					age:"",
					state:1,
					//上级部门
                },
				//编辑界面数据
                editForm:{
                    username:"",
                    email:"",
                    phone:"",
                    password:"",
                    age:"",
                    state:1,
					id:this.id,

                },
                //加载框关闭
                listLoading: false,
				//高级查询所需要的参数
                search:{
                    username:"",
					state:"",
				},
				//员工列表
                employees:[],
				//总条数
                total:0,
				//每页查询条数
                pageSize:this.pageSize,
				//多选框
				sels:[],
                parentEmployeeOptions:[]
			}
		},
		methods:{
            //当前页改变的时候发生变化
            handleCurrentChange(val){
				this.currentPage = val;
                this.loadEmployee();
			},
			//高级查询过
            getEmployees(){
                //加载员工列表
                this.loadEmployee();
			},
            //新增打开窗体
            handleAdd(){
                // //清空表单下面的验证提示
                // this.$refs.addForm.resetFields();
                if(this.$refs.addForm){
                    this.$refs.addForm.resetFields();
                }
                for(var k in this.addForm){
                    this.addForm[k] = "";
                }
                //默认启用
                this.addForm.state = 1;
                //显示弹出框
                this.addFormVisible = true;
            },

            //添加和修改
            addSubmit(){
                //校验form表单是否验证通过
                this.$refs["addForm"].validate((valid) => {
                    if (valid) {
                        let para = Object.assign({}, this.addForm);
                        //封装上级部门对象
                        let parent = {
                            id: para.parentId
                        };
                        //给上级部门设置值
                        para.parent = parent;
                        console.debug(para);
                        if(para.id){//如果id不为空，就证明是修改
                            this.$http.post("/employee",para).then((res => {
                                if(res.data.success){
                                    //关闭窗体
                                    this.addFormVisible = false;
                                    //刷新界面
                                    this.loadEmployee();
                                }else{
                                    this.$message.error(res.data.msg);
                                }
                            }));
                        }else{
                            this.$http.put("/employee", para).then((res => {
                                if(res.data.success){
                                    //关闭窗体
                                    this.addFormVisible = false;
                                    //刷新界面
                                    this.loadEmployee();
                                }else{
                                    this.$message.error(res.data.msg);
                                }
                            }));
                        }
                    }
                });
			},
			//编辑
            handleEdit(index,row){
                this.addFormVisible = true;
                //回显数据
                // this.addForm = Object.assign({}, row);
                for(var k in row){
                    this.addForm[k] = row[k];
                }
                //如果上级部门有值，上级部门回显
                if(this.addForm.parent){
                    this.addForm.parentId = this.addForm.parent.id;
                }
                console.debug(this.addForm);

			},
			//编辑提交
            /*editSubmit() {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.editFormVisible = true;
                        this.$http.post("employee/", this.editForm).then((res => {
                            console.debug(this.editForm);
                            //判断是否成功
                            if (res.data.success) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: '修改失败',
                                    type: 'error'
                                });
                            }
                            //关闭模态框
                            this.editFormVisible = false;
                            this.loadEmployee();
                        }))
                    }
                })
            },*/
			//删除
            handleDel(index,row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //点击确定执行此函数
                    this.$http.delete("http://localhost/employee/"+row.id).then((result=>{
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.loadEmployee();
                    }));
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
			},
            //批量删除
            batchRemove(){
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    //NProgress.start();
                    var ids = this.sels.map(item => item.id);
                    this.$http.patch("employee/patchDelete/",ids).then((res => {
                        console.debug(ids);
                        if (res.data.success){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.loadEmployee();
                        }else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                    }))
                });
            },
			//多选框
            selsChange(sels){
                this.sels = sels;
                //console.debug(sels);
			},
            //状态显示转换
            formatState: function (row, column) {
                return row.state == 1 ? '在职' :'离职';
            },

            loadEmployee(){
                //开启加载框
                this.listLoading = true;
                //准备参数
                let param = {
                    "currentPage":this.currentPage,
					"pageSize":this.pageSize,
					"username":this.search.username,
                	"state":this.search.state
                };
				this.$http.patch("http://localhost/employee",param).then((res=>{
                    console.debug(param);
				    //获取参数列表
				    this.employees = res.data.result;
                    //console.debug(res.data.result);
					//获取总条数
				    this.total = res.data.total;
				    //关闭加载框
				    this.listLoading = false
				}))
			},
            //获取所有的员工（添加/修改）
            loadAllParentEmployees(){
                this.$http.patch("/employee/findAll").then((res => {
                    this.parentEmployeeOptions = res.data;
                }));
            },
		},

		mounted(){

            //加载部门列表
            this.loadEmployee();
            //加载父级部门
            this.loadAllParentEmployees();
		}
    }
</script>